<!-- 账户设置 -->
<template>
  <div>
    <pageHeader :title="title" :breadCrumb="breadCrumb" :show-back="true">
    </pageHeader>
    <div class="account-setting">
      <a-button
        :style="{
          height: '40px',
          margin: '0 20px 20px 0',
        }"
        type="primary"
        @click="add"
        >新建收款账户</a-button
      >
      <div
        style="margin-bottom: 10px"
        v-for="(item, index) in tableList.list"
        :key="index"
      >
        <div class="header">
          <div
            :style="{
              lineHeight: '48px',
              fontWeight: 700,
              fontSize: '18px',
            }"
            >{{ item.typeName }}</div
          >
        </div>
        <a-table
          style="margin-top: 10px"
          :pagination="false"
          :data="item.accountData"
        >
          <template #columns>
            <a-table-column :width="80" align="center">
              <template #title> 序号 </template>
              <template #cell="{ rowIndex }">
                {{ rowIndex + 1 }}
              </template>
            </a-table-column>
            <a-table-column
              :width="200"
              title="账户名称"
              dataIndex="accountName"
              align="center"
            >
            </a-table-column>
            <a-table-column
              :width="200"
              title="银行账号"
              dataIndex="accountNumber"
              align="center"
            >
            </a-table-column>
            <a-table-column
              title="开户银行"
              dataIndex="accountBank"
              align="center"
            >
            </a-table-column>
            <a-table-column
              title="开户省市"
              dataIndex="accountCity"
              align="center"
            >
            </a-table-column>
            <a-table-column
              title="分支行"
              dataIndex="accountBranch"
              align="center"
            >
            </a-table-column>

            <!-- 操作item -->
            <a-table-column
              align="center"
              :width="300"
              fixed="right"
              title="操作"
            >
              <template #cell="{ record }">
                <a-popconfirm
                  @ok="deleteItem(record.id)"
                  content="确定删除吗"
                  type="error"
                >
                  <a-button type="text">删除</a-button>
                </a-popconfirm>
              </template>
            </a-table-column>
          </template>
        </a-table>
      </div>
    </div>

    <addAccount v-model:visible="modalVisible" @addAccountEmit="addAccountEmit">
    </addAccount>
  </div>
</template>

<script lang="ts" setup>
  import { reactive, ref, watchEffect } from 'vue';
  import { useRouter, useRoute } from 'vue-router';
  import {
    GetAccountInfo,
    PostAccountInfo,
    DelAccountInfo,
  } from '@/api/order-management/returned-management/base-setting';
  import addAccount from './components/add-account/index.vue';

  const router = useRouter();
  const title: string = '账号设置';

  const breadCrumb: string[] = ['订单管理', '合同管理', '基础设置', '账号设置'];

  // 储存table数据
  const tableList = reactive<any>({
    list: [],
  });

  // 获取表格数据
  const getData = async () => {
    try {
      const res = await GetAccountInfo({
        pageData: {
          page: 0,
          size: -1,
        },
      });
      tableList.list = res;
    } catch (err: unknown) {
      console.log(err);
    }
  };
  getData();

  let modalVisible = ref(false);
  // 添加账户
  const add = () => {
    modalVisible.value = true;
  };

  // 添加账户返回的自定义事件
  const addAccountEmit = async (form: any) => {
    try {
      await PostAccountInfo(form);
      getData();
    } catch (err: unknown) {
      console.log(err);
    }
  };

  // 删除一项
  const deleteItem = async (id: number) => {
    try {
      await DelAccountInfo({
        id,
      });
      getData();
    } catch (err: unknown) {
      console.log(err);
    }
  };

  // 取消
  const cancel = () => {
    router.back();
  };
</script>

<style scoped lang="less">
  .account-setting {
    padding: 20px;

    .header {
      display: flex;
      height: 48px;
      background-color: #f5f7fa;
    }
    .header::before {
      height: 20px;
      background-color: #165dff;
      width: 5px;
      content: '';
      position: relative;
      margin-left: 20px;
      display: inline-block;
      top: 50%;
      transform: translateY(-50%);
      margin-right: 10px;
    }
    :deep(.arco-table-tr) {
      height: 50px;
    }
  }
</style>
